<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	select{
			width:100px;
			height:150px;
		}
</style>
<script src="jquery.js"></script>
<body>
	<h1>水果选择：</h1>
	<form action="">
		<select name="" id="s1" size='2'>
			<option value="">西瓜</option>
			<option value="">冬瓜</option>
			<option value="">苹果</option>
			<option value="">南瓜</option>
		</select>
		<!--form表单中input button 不提交按钮-->
		<input type="button" value=">>" id='btn'>
		<select name="" id="s2" size='2'>
			
		</select>
	</form>
	
</body>
<script>
	
	/*btn=document.getElementById('btn');
	s1=document.getElementById('s1');
	s2=document.getElementById('s2');
	opts=s1.options;

	btn.onclick=function(){
		idx=s1.selectedIndex;
		//alert(idx);
		s2.add(opts[idx]);
	}*/


	$('#btn').click(function(){
		//找到第一个下拉菜单里的被选中的option,追加到第2个下拉菜单
		//$('#s1 option:selected').appendTo('#s2'); //移动

		//找到第一个下拉菜单里的被选中的option,克隆一份，追加到第2个下拉菜单
		$('#s1 option:selected').clone().appendTo('#s2'); //复制 
	});

</script>
</html>